import { EditContext, IEditor, RectProps } from '@visactor/vtable-editors/es/types'
import { createApp, h } from 'vue'
import Antd from 'ant-design-vue'

export class SlotEditor implements IEditor {
	editorConfig: any
	element: HTMLElement
	container: HTMLElement
	value: any
	col: any
	row: any
	record: any
	field: any
	watchMap: any
	whileGetDataCount: any
	successCallback: Function
	constructor(editorConfig: any) {
		this.watchMap = new Map();
		this.whileGetDataCount = 0
		this.editorConfig = editorConfig
	}
	onStart({ container, value, referencePosition, endEdit, col, row }: EditContext) {
		const that = this
		this.col = col
		this.row = row
		this.container = container
		this.successCallback = endEdit
		this.reRender(container, referencePosition)
	}
	setInstance(instance) {
		this.editorConfig.instance = instance
	}
	reRender(container, referencePosition) {
		const c = this.editorConfig.instance
		if (!c) {
			return
		}
		const record = c.getRecordByCell(this.col, this.row)
		this.record = record
		const field = c.getHeaderField(this.col, this.row)
		this.field = field
		const slots = this.editorConfig.slots
		// const render = this.editorConfig.render
		// const h = this.editorConfig.h
		let slot = slots[field + ':editor']({
			record: record
		})
		let sl = h(
			'div',
			{
				style: 'width:100%;height:100%'
			},
			slot
		)
		if (this.watchMap.get(field) == null) {
			watch(
				() => record[field],
				(newValue, oldValue) => {
					// console.log(newValue,record,this.row)
					const recordIndex = c.getRecordShowIndexByCell(this.col, this.row)
					c.updateRecords([record], [recordIndex])
				}
			)
			this.watchMap.set(field, true)
		}

		let customNode = h(sl, {
			record: record
		})

		// console.log(this.r)
		let app = createApp({
			render: () => customNode
		})
		app.use(Antd)
		const node = document.createElement('div')
		node.setAttribute("class", "slotEditorNode");
		// rootEl.appendChild(node)
		// this.app.mount(node)
		this.element = node
		container.appendChild(this.element)
		app.mount(this.element)

		if (referencePosition?.rect) {
			this.adjustPosition(referencePosition.rect)
		}
	}
	adjustPosition(rect: RectProps) {
		this.element.style.position = 'absolute'
		this.element.style.top = rect.top + 'px'
		this.element.style.left = rect.left + 'px'
		this.element.style.width = rect.width + 'px'
		this.element.style.height = rect.height + 'px'
	}

	getValue() {
		const c = this.editorConfig.instance
		if (!c) {
			return
		}
		return this.record[this.field]
	}

	// async whileGetValue() {

	// 	let oldData = this.record[this.field]

	// 	return new Promise((resolve, rj) => {

	// 		let d = this.record[this.field];
	// 		if (oldData != d) {
	// 			resolve(d)
	// 			return
	// 		}
	// 		if (this.whileGetDataCount > 40) {
	// 			resolve(d)
	// 			return
	// 		}

	// 		setTimeout(async () => {
	// 			this.whileGetDataCount = this.whileGetDataCount + 1
	// 			let d = await this.whileGetValue();
	// 			if (d) {
	// 				resolve(d)
	// 			}
	// 		}, 50)
	// 	})
	// }

	onEnd() {
		if (this.element == null) {
			return
		}
		this.container.removeChild(this.element)
		this.element = null
	}
	exit() {
		// console.log(this.record[this.field])

	}
	isEditorElement(target: HTMLElement) {
		//|| this.picker.el.contains(target)
		if (this.element == null) {
			return false
		}
		if (target === this.element || this.element.contains(target)) {
			return true
		}
		return false
	}
}
